import {
  EllipsisOutlined,
  PlusOutlined,
  AreaChartOutlined,
} from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import {
  Button,
  Dropdown,
  Space,
  Switch,
  Table,
  Tooltip,
} from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { timestampToTime } from '@/utils';
import { connect, history } from 'umi';
import LazyLoad from 'react-lazyload';
import Delservice from '../components/delservice';

type Props = {};
type GithubIssueItem = {
  url: string;
  id: number;
  number: number;
  title: string;
  labels: {
    name: string;
    color: string;
  }[];
  state: string;
  comments: number;
  created_at: string;
  updated_at: string;
  closed_at?: string;
};

const houselist = (props: any) => {
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '楼盘名称',
      dataIndex: 'title',
      render: (item, info: any) => {
        const img = info.rec_position ? (
          <img src="http://fangadmin.shbwyz.com/static/images/rec.png" alt="" />
        ) : (
          ''
        );
        return (
          <React.Fragment>
            {item}
            {info.img ? (
              <Tooltip
                placement="right"
                title={
                  <LazyLoad>
                    <img
                      style={{ width: '100%', height: '100%' }}
                      src={`http://fangadmin.shbwyz.com${info.img}`}
                      alt=""
                    />
                  </LazyLoad>
                }
              >
                <AreaChartOutlined style={{ margin: '0 6px' }} />
              </Tooltip>
            ) : (
              ''
            )}

            {img}
          </React.Fragment>
        );
      },
    },
    {
      title: '所属区域',
      dataIndex: 'developer_name',
    },
    {
      title: '价格',
      dataIndex: 'price',
      render: (item: any) => {
        return (
          <span>
            {item === 0 ? '待定' : item < 10 ? item + '万/套' : item + '元'}
          </span>
        );
      },
    },
    {
      title: '更新时间',
      dataIndex: 'update_time',
      render: (item: any) => {
        return <span>{timestampToTime(item)}</span>;
      },
    },
    {
      title: '排序',
      dataIndex: 'ordid',
    },
    {
      title: '状态',
      dataIndex: 'sale_status',
      render: (item: any) => {
        return (
          <Switch
            checkedChildren="正常"
            unCheckedChildren="禁用"
            defaultChecked={item === 1 ? true : false}
          />
        );
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => {
        return (
          <>
            <Space direction="vertical">
              <Space>
                <Button
                  size="small"
                  style={{ background: '#009688', color: '#fff' }}
                  onClick={() =>
                    history.push('/index/houses/housetype', { ...record })
                  }
                >
                  户型
                </Button>

                <Button
                  size="small"
                  style={{ background: '#009688', color: '#fff' }}
                  onClick={() =>
                    history.push('/index/houses/photo', { state:record.title })
                  }
                >
                  相册
                </Button>

                <Button
                  size="small"
                  style={{ background: '#009688', color: '#fff' }}
                  onClick={() =>
                    history.push('/index/houses/trends', { ...record })
                  }
                >
                  动态
                </Button>
              </Space>

              <Space>
                <Button
                  size="small"
                  style={{ background: '#009688', color: '#fff' }}
                  onClick={() =>
                    history.push('/index/houses/sandtable', { ...record })
                  }
                >
                  沙盘
                </Button>

                <Button
                  size="small"
                  style={{ background: '#009688', color: '#fff' }}
                  onClick={() =>
                    history.push('/index/houses/edithouse', { ...record })
                  }
                >
                  编辑
                </Button>

                <Button
                  size="small"
                  style={{ background: '#FF5722', color: '#fff' }}
                  onClick={() => delhouse(record)}
                >
                  删除
                </Button>
              </Space>
            </Space>
          </>
        );
      },
    },
  ];
  const actionRef = useRef<ActionType>();
  const [delopen, setDelopen] = useState(false);
  const [name,setName]=useState('')
  const [data, setData] = useState([]);
  const [type,setType]=useState('')
  const [id,setId] = useState('')
  // console.log(props);
  const delhouse = (item: any) => {
    setDelopen(true)
    setName(item.title)
    setType('楼盘')
    setId(item.id)
    // console.log(item);
  };
  const closedel = (item: any) => {
    setDelopen(false)
  };
  useEffect(() => {
    // gethouselist().then((res) => {
    //   console.log(res.data);
    //   setData(res.data.data);
    // });
    console.log(props.houseList.length);
    
    props.houseList.length ?"":props.dispatch({ type: 'area/gethouselist' })
  }, []);
  return (
    <div>
      <ProTable<GithubIssueItem>
        columns={columns}
        actionRef={actionRef}
        cardBordered
        editable={{
          type: 'multiple',
        }}
        rowSelection={{
          // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
          // 注释该行则默认不显示下拉选项
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
        }}
        dataSource={props.houseList}
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
          onChange(value) {
            // console.log('value: ', value);
          },
        }}
        rowKey="id"
        search={false}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        bordered
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === 'get') {
              return {
                ...values,
                created_at: [values.startTime, values.endTime],
              };
            }
            return values;
          },
        }}
        pagination={{
          pageSize: 5,
          onChange: (page) => console.log(page),
        }}
        dateFormatter="string"
        headerTitle="高级表格"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined />} type="primary">
            新建
          </Button>,
          <Dropdown
            key="menu"
            menu={{
              items: [
                {
                  label: '1st item',
                  key: '1',
                },
                {
                  label: '2nd item',
                  key: '1',
                },
                {
                  label: '3rd item',
                  key: '1',
                },
              ],
            }}
          >
            <Button>
              <EllipsisOutlined />
            </Button>
          </Dropdown>,
        ]}
      />
      <Delservice open={delopen} close={closedel} name={name} type={type} id={id}></Delservice>
    </div>
  );
};

const mapStateToProps = (state: any) => {
  const { houseList } = state.area;
  return {
    houseList,
  };
};

export default connect(mapStateToProps)(houselist);
